<template>
	<view>
		<view style="width: 750rpx;height: 30rpx;background: #FAF7F8;"></view>
		<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="name">
				当前阶段
			</view>
			<picker :disabled="isEdit" @change="appealstatusPickerChange" :value="index" :range="appealstatusArr">
				<view class="flex-row-flex-end">
					<input @input="textInput" v-model="infoDic.appealstatusName" class="inputView" disabled="true" placeholder="请选择"/>
					<image src="/static/my/mine_blackarrow.png" style="width: 32rpx;height: 32rpx;"></image>
				</view>
			</picker>
		</view>
		<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="name">
				案由
			</view>
			<input @input="textInput" v-model="infoDic.brief" :disabled="isEdit" class="inputView" placeholder="请输入"/>
		</view>
		<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="name">
				是否 
			</view>
			<picker :disabled="isEdit" @change="brieftypePickerChange" :value="index" :range="brieftypeArr">
				<view class="flex-row-flex-end">
					<input @input="textInput" v-model="infoDic.brieftypeName" class="inputView" disabled="true" placeholder="请选择"/>
					<image src="/static/my/mine_blackarrow.png" style="width: 32rpx;height: 32rpx;"></image>
				</view>
			</picker>
		</view>
		<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="flex-row-flex-start">
				<view class="name3">
					受案机关
				</view>
				<picker :disabled="isEdit" @change="institutiontypePickerChange" :value="index" :range="institutiontypeArr">
					<view class="flex-row-flex-start">
						<view class="">
							{{infoDic.institutiontypeName?infoDic.institutiontypeName:'请选择'}}
						</view>
						<image src="/static/my/mine_blackarrow.png" style="width: 32rpx;height: 32rpx;"></image>
					</view>
				</picker>
				
			</view>
			<input @input="textInput" :disabled="isEdit" v-model="infoDic.institutioncontent" class="inputView3" placeholder="请输入"/>
		</view>
		<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="name">
				律师费金额<text style="font-family: DIN, DIN;font-weight: 500;font-size: 36rpx;color: #FF4C4C;margin-left: 30rpx;">￥:</text>
			</view>
			<input @input="textInput" :disabled="isEdit" v-model="infoDic.amount" type="digit" class="inputView4" placeholder="请输入"/>
		</view>
		<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="name">
				律师费支付方式
			</view>
			<input @input="textInput" :disabled="isEdit" v-model="infoDic.payment" class="inputView" placeholder="请输入"/>
		</view>
		<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="name">
				简要重点案情描述
			</view>
			<view class=""></view>
		</view>
		<view style="margin-left: 24rpx;
		width: 696rpx;">
			<u-textarea class="textArea" @input="textInput" :disabled="isEdit" count maxlength="50" v-model="infoDic.description" placeholder="请输入内容" ></u-textarea>
		</view>
	</view>
</template>

<script>
	export default {
		name:"JieDuanAnYouJiGuanFeiYong",
		props: {
			//当前组件内容信息
			infoDic: {
				type: Object,
				default: function() {
					return {
						appealstatusName:'',//上诉状态 文本显示-------------------
						appealstatus: '',//上诉状态（1.一审 2.二审 3.再审4.检查督查 ）
						
						brief: '',//案由
						
						brieftypeName:'',//是否 文本显示-------------------
						brieftype:'',//是否（1.涉黑 2.农民工3.救济人4.集体诉讼5.法律援助）
						
						institutiontypeName:'',//受理机构 文本显示-------------------
						institutiontype:'',//受理机构（1.法院2.公安机关3.检察院4.监狱5.海警局6.军队保卫部门7.仲裁院/委）
						institutioncontent:'',//受理机构名称
						
						amount:'',
						payment:'',
						description:''
					};
				}
			},
			//当前组件是否可编辑
			isEdit: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				index:0,
				appealstatusArr:['一审','二审','再审','检查督查'],
				brieftypeArr:['涉黑','农民工','救济人','集体诉讼','法律援助'],
				institutiontypeArr:['法院','公安机关','检察院','监狱','海警局','军队保卫部门','仲裁院/委'],
			};
		},
		methods:{
			institutiontypePickerChange(e){
				console.log('e-------',e)
				let strNum = Number(e.detail.value)
				strNum += 1
				this.infoDic.institutiontype = strNum.toString()
				this.infoDic.institutiontypeName = this.institutiontypeArr[Number(e.detail.value)]
				this.textInput()
			},
			//是否
			brieftypePickerChange(e){
				console.log('e-------',e)
				let strNum = Number(e.detail.value)
				strNum += 1
				this.infoDic.brieftype = strNum.toString()
				this.infoDic.brieftypeName = this.brieftypeArr[Number(e.detail.value)]
				this.textInput()
			},
			//当前阶段
			appealstatusPickerChange(e){
				console.log('e-------',e)
				let strNum = Number(e.detail.value)
				strNum += 1
				this.infoDic.appealstatus = strNum.toString()
				this.infoDic.appealstatusName = this.appealstatusArr[Number(e.detail.value)]
				this.textInput()
			},
			textInput(){
				console.log('this.infoDic----',this.infoDic)
				this.$emit('JieDuanAnYouJiGuanFeiYongInfoCallBack', this.infoDic)
			},
			//判断字符串是否为整数或者浮点数
			isNumber(str) {
			  return /^\d+(\.\d+)?$/.test(str);
			},
			//判断字符串是否为身份证号
			isIdCard(id) {
			  const pattern = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
			  return pattern.test(id);
			},
			//判断字符串是否为手机号
			isMobile(phone) {
			  const regex = /^1[3-9]\d{9}$/;
			  return regex.test(phone);
			}
		}
	}
</script>

<style>
	.frontbackIcon{
		width: 336rpx;
		height: 200rpx;
	}
	.frontbackText{
		margin-top: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.sexIcon{
		width: 36rpx;
		height: 36rpx;
		background-color: #E93548;
	}
	.sexText{
		margin-left: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.inputView{
		width: 440rpx;
		margin-left: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView2{
		width: 160rpx;
		margin-left: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: left;
	}
	.inputView3{
		width: 200rpx;
		margin-left: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView4{
		width: 456rpx;
		margin-left: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: left;
	}
	.name{
		width: 250rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name2{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name3{
		width: 180rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.contentView{
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.contentView2{
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
	}
	.dsr{
		margin-left: 24rpx;
		margin-top: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
</style>